<template>
    <div class="page">
        <div class="page-top">
            <!-- 面包屑 -->
            <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
        </div>
        <div class="page-content">
            <a-table :loading='loading' :columns="columns" :data-source='data' :pagination='false'>
                <template slot="hasPass" slot-scope="record">{{ record ? '通过' : '未通过' }}</template>
                <template slot="needUpdate" slot-scope="record">{{ record ? '需要' : '不需要' }}</template>
                <template slot="id" slot-scope="id">
                    <a-button type='primary' @click="onChange(id)">修改</a-button>
                </template>
            </a-table>
            <a-modal :visible="visible" title="修改" @ok="onSubmit" @cancel="handleCancel" width="600px">
                <a-form-model :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="版本号">
                        <a-input style="width:200px" v-model='form.versionCode'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="是否通过">
                        <a-radio-group v-model="form.hasPass">
                            <a-radio :value="true">通过</a-radio>
                            <a-radio :value="false">未通过</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="是否需要强制更新">
                        <a-radio-group v-model="form.needUpdate">
                            <a-radio :value="true">需要</a-radio>
                            <a-radio :value="false">不需要</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="更新人">
                        <a-input style="width:200px" v-model='form.updateBy'></a-input>
                    </a-form-model-item>
                    <a-form-model-item v-if="current == 'hfgdsyrte78iu7'" label="下载地址">
                        <!-- <a-input style="width:100%" v-model='form.downloadUrl' disabled></a-input> -->
                        {{ form.downloadUrl }}
                    </a-form-model-item>
                    <a-form-model-item label="上传" v-if="current == 'hfgdsyrte78iu7'">
                        <a-upload name="file" :multiple="false" action="/common/uploadFile" :headers="headers"
                            @change="handleChange">
                            <a-button>
                                <a-icon type="upload" /> 上传
                            </a-button>
                        </a-upload>
                    </a-form-model-item>
                    <a-form-model-item label="描述">
                        <a-input style="width:200px" v-model='form.description'></a-input>
                    </a-form-model-item>
                    <!-- <a-form-model-item>
                        <a-button style="margin-left:113px" type='primary' @click="onSubmit">确定</a-button>
                    </a-form-model-item> -->
                </a-form-model>
            </a-modal>
        </div>
    </div>
</template>

<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getAppVersion, updateAppVersion } from "@/request/api";
export default {
    data() {
        return {
            headers: {
                authorization: 'authorization-text',
            },
            hreadcrumbAry: [
                { name: "首页", path: "/", query: {} },
                { name: "app版本控制", path: "/appversion", query: {} },
            ],
            columns: [
                {
                    title: 'ID',
                    dataIndex: "id",
                    key: '',
                },
                {
                    title: '版本号',
                    dataIndex: "versionCode",
                    key: '',
                },
                {
                    title: '创建时间',
                    dataIndex: "createTime",
                    key: '',
                },
                {
                    title: '是否通过',
                    dataIndex: "hasPass",
                    key: '',
                    slots: { title: "是否通过" },
                    scopedSlots: { customRender: "hasPass" },
                },
                {
                    title: '是否需要强制更新',
                    dataIndex: "needUpdate",
                    key: '',
                    slots: { title: "是否需要强制更新" },
                    scopedSlots: { customRender: "needUpdate" },
                },
                {
                    title: '更新时间',
                    dataIndex: "updateTime",
                    key: '',
                },
                {
                    title: '更新人',
                    dataIndex: "updateBy",
                    key: '',
                },
                {
                    title: '下载地址',
                    dataIndex: "downloadUrl",
                    key: '',
                },
                {
                    title: '描述',
                    dataIndex: "description",
                    key: '',
                },
                {
                    title: '操作',
                    dataIndex: "id",
                    key: '',
                    slots: { title: "操作" },
                    scopedSlots: { customRender: "id" },
                },
            ],
            data: [],
            form: {
                id: '',
                hasPass: false,
                needUpdate: false,
                versionCode: '',
                updateBy: '',
                downloadUrl: '',
                description: ''
            },
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
            loading: false,
            current: '',
            visible: false
        }
    },
    components: {
        Hreadcrumb,
    },
    created() {
        this.getAppVersion();
        // let arr = []

        // array.map((item,index)=>{
        //     // 每一项添加默认megre = 0
        //     item.megre = 0
        //     // 用indexOf获取重复项第一次出现的下标
        //     if(index > 0){
        //         if(item.dictName == array[index-1].dictName){
        //             let pos = array.map(items=>{
        //                 return items.dictName
        //             }).indexOf(item.dictName)
        //             arr.push(pos)
        //         }
        //     }
        // })
        // // 去重
        // let len = Array.from(new Set(arr))
        // // 遍历数组设置megre = 2
        // array.map((item,index)=>{
        //     len.map(items=>{
        //         if(items == index){
        //             item.megre = 2
        //         }
        //     })
        // })
        // console.log(array)
    },  
    methods: {
        async getAppVersion() {
            this.loading = true
            let { data } = await getAppVersion('')
            console.log(data)
            this.loading = false
            if (data.success) {
                this.data = data.content
                this.form.id = data.content[1].id
            } else {
                this.error(data.message)
            }
        },
        async updateAppVersion(param) {
            let { data } = await updateAppVersion(param)
            console.log(data)
            if (data.success) {
                this.form = {
                    hasPass: false,
                    needUpdate: false,
                    versionCode: '',
                    updateBy: '',
                    downloadUrl: '',
                    description: ''
                }
                this.getAppVersion()

            } else {
                this.error(data.message)
            }
        },
        onSubmit() {
            console.log(this.form)
            this.form.id = this.current
            this.visible = false
            this.updateAppVersion(this.form)
        },
        onChange(id) {
            console.log(id)
            this.current = id
            this.visible = true
        },
        handleCancel() {
            this.current = ''
            this.visible = false
        },
        handleChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
                if (info.file.response.success) {
                    this.form.downloadUrl = 'https://sanxun-oss.oss-cn-shanghai.aliyuncs.com/' + info.file.response.content
                }
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`);
            }
        }
    }
}
</script>

<style>
.page-content {
    background-color: #fff;
    padding: 25px;
}
</style>
